<template>
    <div>
        <h2>展示电脑</h2>
        <ul >
            <li v-for="i in items" :key="i.id">{{i.name}}</li>
        </ul>
        <p>
            <button @click="up_page()">上一页</button>
            <button v-for="p in page_list" :key="p" @click="page(p)">{{p}}</button>
            <button @click="down_page()">下一页</button>
        </p>
    </div>    
</template>

<script>
import axios from "axios"

export default {
    name:"showcom",
    data() {
        return {
            items:[],
            all_page:"",
            page_list:[],
            p:1,
        }
    },
    methods:{
        get_com(){
            var data={"page":this.p}
            console.log(1111111)
            axios({
                url:"http://127.0.0.1:8000/app02/page/",
                method:"get",
                params:data
            }).then(res=>{
                console.log(res.data)
                this.items = res.data.data
                this.all_page = res.data.all_page
                this.page_list = res.data.page_list
            })
        },
          up_page(){
              if(this.p>1){
                  this.p-=1
                  this.get_com()
              }else{
                  this.p=1
                  this.get_com()
              }
          },
          page(p){
              this.p=p
              this.get_com()
          },
          down_page(){
              if(this.p<this.all_page){
                  this.p+=1
                  this.get_com()
              }else{
                  this.p=this.all_page
                  this.get_com()
              }
          }  
    },
    created(){
        this.get_com()
    }
}
</script>

<style>

</style>
